@charset "utf-8";
@import "reset";
@function r($px){
	@return $px/100px*1rem;
}
.web{
	width: r(640px);
	padding-top: r(89px);
	padding-bottom: r(96px);
	header{
		width: r(640px);
		height: r(89px);
		background-color: #B20000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: white;
		padding: 0 r(17px);
		position: fixed;
		top: 0;
		img{
			width: r(264px);
		}
	}
	.swiper{	
		width: r(640px);
		height: r(347px);
		position: relative;	
			img{
				width: 100%;
				height: 100%;		
			}
		.article-Text1{
			position: absolute;
			bottom: 0;
			width: r(640px);
			height: r(102px);
			background-color: rgba($color: #000000, $alpha: 0.5);
			// filter:alpha(Opacity=80);
			// -moz-opacity:0.6;
			// opacity: 0.6;
			p{
				font-size: r(28px);
				color: white;
				margin: r(15px) r(28px);
				span{
					background-color: #B20000;
				}
			}
		}
	}
	.content{
		height: r(1100px);
		width: r(583px);
		margin: r(21px) r(29px);
		font-size: r(25px);
		.content-article{
			width: r(583px);
			height: r(344px);
			.article-info{
				color: black;
				margin-bottom: r(20px);
				width: r(583px);
				display: flex;
				justify-content: space-between;
				.left{
					//width: r(280px);
					background-color: #f6f6f6;
					img{
						width: r(282px);
						height: r(183px);
					}
					.text1{
						background-color: #f6f6f6;
						width: r(280px);
						display: flex;
						justify-content: space-between;
						margin-top: r(15px);
						p:nth-of-type(1){
							width: r(87px);
							height: r(27px);
							background-color: #B20000;
							text-align: center;
							line-height: r(27px);
							font-size: r(20px);
							color: white;
							border-radius: 10px;
						}
						p:nth-of-type(2){
							span{
								color: #c5c5c5;
							}
						}
					}
					.text2{
						background-color: #f6f6f6;
						width: r(280px);
						p{
							font-size: r(20px);
							color: #C5C5C5;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
				.right{
					background-color: #f6f6f6;
					img{
						width: r(282px);
						height: r(183px);
					}
					.text1{
						background-color: #f6f6f6;
						width: r(280px);
						display: flex;
						justify-content: space-between;
						margin-top: r(15px);
						p:nth-of-type(1){
							width: r(87px);
							height: r(27px);
							background-color: #B20000;
							text-align: center;
							line-height: r(27px);
							font-size: r(20px);
							color: white;
							border-radius: 10px;
						}
						p:nth-of-type(2){
							span{
								color: #c5c5c5;
							}
						}
					}
					.text2{
						background-color: #f6f6f6;
						width: r(280px);
						p{
							font-size: r(20px);
							color: #C5C5C5;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
			}
		}	
	}
	hr{
		margin: 0 r(29px);
		height: 1px;
	}
	.more{
		//height: r(200px);
		p{
			text-align: center;
			color: #C5C5C5;
			font-size: r(30px);
			
		}
	}
	.footer_Nav{
		width:r(640px);
		height: r(96px);
		background-color: #f5f5f5;
		position: fixed;
		bottom:0;
		display: flex;
		justify-content: space-around;
		font-size: 0;
		div{
			height: 100%;
			//width: 20%;
			margin-top: r(10px);
			font-size: r(20px);
			//align-items: center;
			text-align: center;
			display: block;
			color: #8b8b8b;
			p{
				text-align: center;
				i{
					font-size: r(55px);
				}
			}	
		}
		div:nth-of-type(3){
			color: red;
		}
	}
	.search{
					width: 100%;
					height: 100%;
					background-color: #f1f1f1;
					transform: translateY(100%);
					position: fixed;
					top:0;
					left:0;
					.hotword{
						p{
							font-size: r(40px);
							margin: r(24px) r(34px);
						}
					}		
					.one{
						color:#fefcfd;
						height: r(100px);
						background-color: #1f1f1f;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 r(17px);
						font-size: r(31px);
						.search_box{
							width: r(500px);
							position: relative;
							.search_icon{
								padding-left: r(10px);
								position: absolute;
								top:r(10px);
							}
							.search_1{
								input[type="search"]{
									width: r(500px);
									height: r(58px);
									border-radius: 10px;
									border:solid #fefcfd 0.5px;
									padding-left: r(60px);
									padding-right: r(20px);
									background-color:#1f1f1f ;
									color: white;
							}
						}		
					}
				}
			    .search_world{
			    	margin-left: r(34px);
			    	margin-right: 40px;
					
			    	.line{
			    		display: flex;
			    		justify-content: space-between;
						padding: r(10px) 0;
			    		p{
			    			font-size: r(30px);
							//border: 1px solid black;
							background-color: white;
							padding: r(10px);
			    		}
			    	}
			    }
			}
		.list{
						width:100%;
						height: 100%;
						background-color: #303030;
						transform: translateX(-100%);
						position: fixed;
						top:0;
						overflow: scroll;
						.list_header{
							color:#fefcfd;
							height: r(100px);
							background-color: #21201c;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 r(17px);
							font-size: r(31px);
							.colse{}
							.search_header{
								position: relative;
								.sousuo{
									position: absolute;
									top: r(10px);
									margin-left: 6px;
								}
								.search_input{
									
									input[type="search"]{
										width: r(500px);
										height: r(58px);
										border-radius: 10px;
										border:solid #fefcfd 0.5px;
										padding-left: r(60px);
										padding-right: r(20px);
										background-color:#1f1f1f ;
										color: white;
									}
								}
							}
						}
						hr{
							margin: 0 10px;
							border: 0.5px solid #524e4d;
						}
						.login{
							background-color: #222222;
							height: r(450px);
							position: relative;
							padding-top: r(100px);
							.login_img{
								width: r(180px);
								height: r(180px);
								border-radius: 50%;
								margin: 0 auto;
								// position: absolute;
								// top: r(100px);
								img{
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}
							.login_A{
								    width: 50%;
									margin: 0 auto;
									font-size: r(50px);
									p{
										color: white;
										text-align: center;
										a{
											font-size: r(30px);
											color: #505050;
										}
									}
							}
						}
						.operate{
							background-color: #222222;
							margin-top: r(15px);
							//height: 300px;
							.first{		
								color: white;
								font-size: r(30px);
								padding: r(20px);
								label{
									display: flex;
									justify-content: space-between;
								}		
							}	
							input{
								display: contents;
							}
							input:checked + div{
								max-height: r(200px);
								transition: all 1s;
							}
							.second{
								max-height: 0;
								overflow: hidden;
								color: white;
								font-size: r(30px);
								text-align: center;
								//padding: r(20px) 0;
								p{
									padding: r(20px) 0;
								}
							}
						}
					}	
}
